<template>
    <div>
        <van-nav-bar
            title="收货地址"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <van-cell-group inset>
            <van-field
                v-model="position"
                center
                clearable
                label="地址"
                placeholder="请输入收货地址"
            >
                <template #button>
                    <van-button size="small" type="primary" @click="handleAdd"
                        >确认</van-button
                    >
                </template>
            </van-field>
        </van-cell-group>
        <div>
            <div v-for="item in positions" :key="item.id" class="position-box">
                <div>
                    {{ item.position }}
                </div>
                <van-button
                    size="small"
                    type="danger"
                    @click="handleRemove(item)"
                    >删除</van-button
                >
            </div>
        </div>
    </div>
</template>

<script setup>
import { useStore } from "vuex";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { addOrder } from "@/api/basic";
import { showToast, Toast } from "vant";

const store = useStore();
const router = useRouter();

const position = ref("");

const positions = computed(() => {
    return store.getters.positions;
});

const userInfo = computed(() => {
    return store.getters.userInfo;
});

const handleAdd = () => {
    if (!position.value) {
        showToast("地址不允许为空");
        return;
    }
    store.commit("ADD_POSITION", position.value);
    position.value = "";
    showToast("添加成功");
};

const handleRemove = (item) => {
    store.commit("REMOVE_POSITION", item.id);
    showToast("删除成功");
};

const onClickLeft = () => {
    router.back();
};
</script>

<style scoped>
.position-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
}
</style>
